<template>
  <div id="province" v-bind:class="classArr[selectProvince]">
    <div class="container">
      <span class="province-text">省份:   </span>
      <el-select v-model="selectProvince" placeholder="请选择">
        <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
      </el-select>
      <div class="table">
        <el-table
                style="width: 500px"
                height="450"
                :data="colleges">
          <el-table-column
                  fixed
                  type="index"
                  label="序号"
                  width="150"
                  :index="indexMethod">
          </el-table-column>

          <el-table-column
                  prop="name"
                  label="学校名称"
                  width="150">
          </el-table-column>

          <el-table-column
                  prop="rank"
                  label="是否985"
                  width="120">
          </el-table-column>
        </el-table>
      </div>
      <img :src="backgroundImg[selectProvince]" alt="">
      <div class="info">{{info[selectProvince]}}</div>
    </div>
  </div>
</template>

<script>
  import {colleges} from "../../assets/js/college";

  export default {
    name: "Province",
    data() {
      return {
        options: [{
          value: '0',
          label: '湖北省'
        }, {
          value: '1',
          label: '北京市'
        }],
        selectProvince: 0,
        provinceArr: ['湖北省', '北京市'],
        classArr: ['hubeiImg', 'beijingImg'],
        backgroundImg:['http://115.159.66.213:8000/hubeibackground.png','http://115.159.66.213:8000/beijingbackground.jpg'],
        colleges: [],
        info:['湖北省，简称“鄂”，中华人民共和国省级行政区，省会武汉。地处中国中部地区，东邻安徽，西连重庆，西北与陕西接壤，南接江西、湖南，北与河南毗邻，介于北纬29°01′53″—33°6′47″、东经108°21′42″—116°07′50″之间，东西长约740千米，南北宽约470千米，总面积18.59万平方千米，占中国总面积的1.94%。最东端是黄梅县，最西端是利川市，最南端是来凤县，最北端是郧西县。','北京（Beijing），简称“京”，古称燕京、北平，是中华人民共和国的首都、直辖市、国家中心城市、超大城市，国务院批复确定的中国政治中心、文化中心、国际交往中心、科技创新中心 [1]  ，截至2018年，全市下辖16个区，总面积16410.54平方千米，2019年末，常住人口2153.6万人，城镇人口1865万人，城镇化率86.6% [2]  ，常住外来人口达794.3万人']
      }
    },
    methods: {
      indexMethod(index) {
        return index
      },
      update() {
        this.colleges = []
        let province = this.provinceArr[this.selectProvince]
        colleges.forEach(college => {
          if (college.province === province) {
            if(college.is985){
              college.rank="是"
            }else{
              college.rank="否"
            }
            this.colleges.push(college)
          }
        })
      }
    },
    watch:{
      selectProvince(){
        this.update()
      }
    },
    created() {
      this.update()
    }
  }
</script>

<style scoped>
  #province {
    position: relative;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100%, 100%;
  }

  .container {
    height: 80%;
    background-color: #f2f2f2;
    margin: 0 300px;
    padding: 50px 50px;
    opacity: 0.95;
  }

  .province-text {
    font-size: 16px;
  }

  .hubeiImg {
    background-image: url("http://115.159.66.213:8000/hubeishengword.png");
  }

  .beijingImg {
    background-image: url("http://115.159.66.213:8000/beijingshengword.png");
  }

  .table{
    margin-top: 30px;
  }

  img{
    position: absolute;
    width: 600px;
    height: 248px;
    top: 120px;
    right: 350px;
  }

  .info{
    display: -webkit-box;
    position: absolute;
    top: 400px;
    right: 356px;
    width:600px;
    text-indent: 2em;
    line-height: 24px;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>